<!--
 * @Author: your name
 * @Date: 2021-02-27 23:58:45
 * @LastEditTime: 2021-07-22 15:59:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-antd-koa\vue3-antd-pc\src\views\show\Blog.vue
-->
<template>
  <div>
    <card-list :cardRecords="cardRecords" @handler="handler" />
    <c-pagination :total="total" :defaultPageSize="limit" />
  </div>
</template>

<script>
import { blogViewConfig } from "@vp/show/blog";
import CardList from "@b/card-list";
import CPagination from "@c/pagination.vue";
import { watchEffect } from "vue";
import http from "@u/http.js";
import { useInfoNotice } from "@u/notice.js";
import { useRoutePathToPage } from "@u/router.js";
import { useLinkedRouteParam } from "@u/route.js";

export default {
  components: {
    CardList,
    CPagination,
  },
  setup() {
    const { cardRecords, limit, total } = blogViewConfig;
    const pageNum = useLinkedRouteParam("pageNum");
    watchEffect(
      async () => {
        try {
          const res = await http.get(
            `/articles?type=blog&limit=${limit.value}&page=${pageNum.value}`
          );
          cardRecords.value = res.data.rows;
          total.value = res.data.count;
        } catch (error) {
          useInfoNotice({
            message: "获取失败",
            description: error.reason || error.data || "未知错误",
          });
        }
      },
      { flush: "post" }
    );

    const handler = (id) => {
      const toPage = useRoutePathToPage(`/details/${id}`);
      toPage();
    };

    return { cardRecords, total, limit, handler };
  },
};
</script>